//最后异步 懒加载
import {lazy,Suspense} from 'react'
import {Navigate,useRoutes} from 'react-router-dom'
import Notfound from '../components/404'

const  Login=lazy(()=>import('../components/Login'))
//懒加载 即需要什么页面就加载什么页面
const Main = lazy(()=>import('../components/Main'))

const  About = lazy (()=>import('../components/Main/About'))
const  Home = lazy(()=>import('../components/Main/Home'))
const Music =lazy(()=>import('../components/Main/Home/Music'))
const News=lazy(()=>import('../components/Main/Home/News'))


//优雅降级
const load= (A)=>{
    return (
        <Suspense fallback='loading.......'>
            <A/>
        </Suspense>
    )
}


export const routers =[
    {
        path:'/login',
        element:load(Login),
    },
    {
        path:'/main',
        element:load(Main),
        children:[
            {
                path:'/main/about',
                element: load(About),
            },
            {
                path:'/main/home',
                element:load(Home),
                children:[
                    {
                        path:'/main/home/music/:id',
                        element:load(Music),
                    },
                    {
                        path:'/main/home/news/:id',
                        element:load(News)
                    }
                ]
            },
        ]
    },
    {
        path:'*',
        element:load(Notfound)
    },
    {
        path:'/',
        element:<Navigate to='/login'/>,
    },
]

export const Useroute = ()=>{
    return useRoutes(routers)
}